<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>安捷能源</title>
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/nowChart.css}">
    <style>
        .gongkuang > div{
            width: 100%;
            margin-left: 0px;
            margin-top: 10px;
        }
        .gongkuang > div > div{
            width: 90%;
            margin-left: 0px;
        }
        .gongkuang > div > img{
            margin-right: 0px;
            margin-left: 0px;
        }
        /*.gongkuang::-webkit-scrollbar {*/
            /*display: none;!*隐藏滚动条*!*/
        /*}*/
        /*.gongkuang { -ms-overflow-style: none; }*/
        /*.gongkuang { overflow: -moz-scrollbars-none; }*/
    </style>
</head>
<body>
<div class="bottom">
    <div class="bottom_left" style="width: 65%;height: 100%" id="tupu">
        <div class="bottom_left_title">
            知识图谱图
        </div>
        <!--        知识图谱开始-->
        <div style="position: relative;width: 100%;height: 100%;min-height: 450px;margin-left: -25px" id="knowChart">
            <div id="loadingDiv" style="position: absolute;top:50%;left:50%">
                <img style="width: 30px;height: 30px;" th:src="@{img2/loadding.gif}" alt="">
            </div>
        </div>
        <!--        知识图谱结束-->
    </div>
    <div class="bottom_right" style="width: 35%;margin-left: 0px">
        <div class="bottom_right_top" style="width: 100%;overflow: hidden">
            <div class="bottom_right_top_title">
                策略建议
            </div>
            <div style="position: relative;overflow: hidden;width: 100%;height: 70%;">
            <div class="gongkuang" style="width: 100%;height: 100%;overflow-y:scroll ;padding-right:17px;position: absolute;right:-17px">
            </div>
            </div>
        </div>
        <div class="bottom_right_bottom" style="height: 30%">
            <div>
                <div class="bottom_right_bottom_title" style="float: left">
                    策略库
                </div>
                <div class="bottom_right_bottom_title" style="width: 200px;float:left">
                    写字楼工况模式
                </div>
            </div>
            <div class="bottom_computer">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <!--                <img src="img2/computer.png" alt="">-->
                <div style="color:#fff;float: right">......</div>
            </div>
        </div>

    </div>
</div>
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<!--<script th:src="@{/js/time.js}"></script>-->
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/jquery.blockUI.js}"></script>
<script>
    var mychart;
    $(function(){
        var totalHeight=$(window).height();
        console.log('body高度:'+document.body.style.height);
        $('body').height(totalHeight);
        $('.bottom').height(totalHeight);
        $('.bottom_right').height(totalHeight);
        $('#knowChart').height(totalHeight-52);
        mychart=echarts.init(document.getElementById("knowChart"));
        // chartssize(document.getElementById("tupu"),document.getElementById("knowChart"));
        getNodeAndLine();
    })

    //高度计算
    // console.log("高度为:"+getComputedStyle(document.getElementsByClassName('bottom')[0],'height').height);
    // mychart.getDom().style.height =getComputedStyle(document.getElementsByClassName('bottom')[0],'height').height;
    // mychart.resize();
    // mychart.style.height=totalHeight-52+'px';

    function getNodeAndLine(){
        $.ajax({
            type: "GET",
            url: "/power/relationship/getViewAtlas",
            dataType: "json",
            async:false,
            success: function(data){
                console.log(1);
                console.log(data.node);
                console.log(data.edge);
                var node=data.node;
                var edge=data.edge;
                var nodeLength=data.node.length;
                var edgeLength=data.edge.length;
                console.log(nodeLength);
                console.log(edgeLength);
                var nodeObject={   //节点对象
                    "name":"设备",
                    desc:"8",
                    "value":[200,80],
                    symbolSize:[60,80],
                    selected:true,
                    // symbol:'image://http://134.175.123.16:8088/b852723e-b20b-41ef-96a4-a572b248c4c4.png',
                    // symbol:'none'
                    symbol:'circle',
                    itemStyle: {
                        color: '#fff'
                    }
                };
                line_direction_option.series[0].data=node.map(function(item,index){
                    return {
                        name:item.deviceName,
                        desc:item.deviceId.toString(),
                        value:item.coordinate,
                        symbol:(item.picPath==null)?'circle':"image://"+item.picPath,
                        symbolSize:[50,50],
                        selected:true,
                        itemStyle: {
                            color: '#fff'
                        }
                    }
                })
                line_direction_option.series[1].data=edge.map(function(item){
                    return {
                        name:"",
                        coords:item.line,
                        desc:item.desc,
                        effect: {
                            show: false,
                            trailLength: 0,
                            symbolSize: [30,30],
                            symbol:'none'
                            // symbol:'none'
                            // symbol:'image://img/sun.png'
                        },
                    }
                })
                $.ajax({
                    type: "GET",
                    url: "/power/gen",
                    dataType: "json",
                    async:true,
                    beforeSend: function () {
                        // $.blockUI();//请求之前打开
                        $.blockUI({ message: '<h1>请等待...</h1>' });
                    },
                    success: function(data){
                        $.unblockUI();//返回关闭
                        var path2='image://img/littlesun.png';
                        var rc=data.rc;
                        // var rc="1";
                        if(rc=="0"){
                            var nodeHigh=[]; //保存高亮节点数组
                            var edgeHigh=[];//保存高亮边数组
                            console.log(data.gongkuang);
                            var nodeHigh1=data.node;
                            var edgeHigh1=data.path;
                            var arr=data.gongkuang;//工况数组
                            //动态生成工况开始
                            var gongkuang1=document.getElementsByClassName("gongkuang")[0];
                            gongkuang1.innerHTML='';
                            for(var i=0;i<arr.length;i++){
                                var newdiv=document.createElement("div");
                                //     <!--                <div>-->
                                //     <!--                    <img src="img2/computer.png" alt="" >-->
                                //     <!--                    <span>工况6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蓄能</span>-->
                                //     <!--                    <div></div>-->
                                //     <!--                </div>-->
                                // <!--                <div>-->
                                var newimg=document.createElement("img");
                                newimg.setAttribute("src","img2/computer.png");
                                newdiv.appendChild(newimg);
                                var newdiv1=document.createElement("div");
                                var newspan=document.createElement("span");
                                newspan.innerHTML=arr[i];
                                newdiv.appendChild(newspan);
                                newdiv.appendChild(newdiv1);
                                var gongkuang=document.getElementsByClassName("gongkuang")[0];
                                gongkuang.appendChild(newdiv);
                                // console.log(arr[i]);
                            }
                            //遍历节点对象，将对象转为数组。
                            for(var index1=0;index1<nodeHigh1.length;index1++){
                                nodeHigh.push(nodeHigh1[index1]);
                            }
                            //遍历边对象，将对象转为数组。
                            for(var index2=0;index2<edgeHigh1.length;index2++){
                                edgeHigh.push(edgeHigh1[index2]);
                            }
                            console.log("data="+nodeHigh);
                            console.log("data="+edgeHigh);
                            console.log(typeof nodeHigh);
                            console.log(typeof edgeHigh);
                            console.log(data.rc);
                            console.log(typeof data.rc);
                            for(var i=0;i<nodeLength;i++){   //节点高亮
                                for(var j=0;j<nodeHigh.length;j++){
                                    console.log(node[i].deviceId);
                                    if(nodeHigh[j]==node[i].deviceId){
                                        //如果id相同则通过id查询高亮图片，高亮。
                                        $.ajax({
                                            type: "GET",
                                            url: "/power/device/getHighlightPic/"+node[i].deviceId,
                                            dataType: "json",
                                            async:false,
                                            success: function(data) {
                                                line_direction_option.series[0].data[i].symbol="image://"+data.highlight;
                                            }
                                        })
                                    }
                                }
                            }
                            for(var i=0;i<edgeLength;i++){ //边高亮
                                for(var j=0;j<edgeHigh.length;j++){
                                    console.log(node[i].deviceId);
                                    if(edgeHigh[j]==edge[i].desc){  //如果关系名称相同则边高亮。
                                        // line_direction_option.series[1].data[i].effect.symbol="image://"+edge[i].icon;
                                        line_direction_option.series[1].data[i].effect.symbol="image://"+edge[i].energyPic;

                                    }
                                }
                            }
                            $("#loadingDiv").parent().remove();
                            mychart.setOption(line_direction_option);

                        }
                        else if(rc=="1"){
                            $("#loadingDiv").parent().remove();
                            mychart.setOption(line_direction_option);
                            // layer.alert('找不到策略,请检查数据输入是否正常', {
                            //
                            //     icon: 5,
                            //
                            //     title: "提示"
                            //
                            // });return false;
                        }

                    }
                })
            },
        })
    }

    var line_direction_option={
        title: {  //标题
            // text: '夏季能源知识图谱',
            left: '-5',
            top: '10px',
            textStyle: {
                color: '#ffffff',
                fontFamily: '微软雅黑',
                fontWeight: 'lighter',
                fontSize: 16
            },
        },
        // 提示框的配置
        tooltip: {
            trigger: 'item',
            formatter:"名称:{b0}" +"<br>"+
            "坐标值:"+"["+"{c0}"+"]",
        },

        xAxis: {  //X轴的设置
            type: 'value',
            boundaryGap: false,
            show: false
        },
        yAxis: { //Y轴的设置
            type: 'value',
            show: false,
            inverse: true,
        },
        series: [{   //节点
            type: 'graph',
            layout: 'none',
            // silent: true,          //不响应鼠标事件
            coordinateSystem: 'cartesian2d',
            symbolSize: 20,
            showEffectOn: 'render',
            zlevel: 2,
            rippleEffect: {
                period: 3, //波纹秒数
                brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
                scale: 10 //波纹范围
            },
            hoverAnimation: true,

            label: {
                normal: {
                    show: true,
                    position: 'bottom',//设置label显示的位置
                    // formatter: '{c}',//设置label读取的值为value
                    textStyle: {
                        fontSize: '16'
                    },
                }
            },
            data:[]
        },

            {
                type: 'lines',
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                coordinateSystem: 'cartesian2d',
                label: {
                    show: true,
                    position: 'middle',
                    fontSize: 16,
                    color: '#fff',
                },
                lineStyle: {
                    normal: {
                        // color: '#fff',
                        color: '#fff',

                        width: 3,
                        opacity: 0.5,
                        curveness: 0,

                    }
                },
                effect: {
                    show: true,
                    // smooth: false,
                    trailLength: 0,
                    symbol: "none", // ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’
                    // color: '#507577',
                    symbolSize: 50,
                    // symbol:planePath,
                    // symbol:'none'
                },
                data: [],
            }
        ],

    }
    window.addEventListener("resize",function(){
        //窗口大小的自适应
        var changeHeigth=$(window).height();
        $('body').height(changeHeigth);
        $('.bottom').height(changeHeigth);
        $('.bottom_right').height(changeHeigth);
        $('#knowChart').height(changeHeigth-52);
        mychart.resize();
    });
</script>
</body>
</html>